<div class="main_div">
  <div class="title_text margin_bottom_30 text_center">{{vm.header}}</div>
  <div class="middle_hadoop_div margin_bottom_10">
    <div>
      <span>{{::vm.securityTypeLabel}}</span>
    </div>
    <div>
      <input id="securityNone" type="radio" ng-model="vm.data.model.securityType" name="securityType"
             class="radio-button" value="{{::vm.securityType.NONE}}" checked>
      <label class="radio-button-label" for="securityNone" tabindex="0"
             ng-keydown="vm.keyDown($event,vm.securityType.NONE)">{{::vm.securityType.NONE}}</label>
      <br/>
      <input id="securityKerberos"  type="radio" ng-model="vm.data.model.securityType" name="securityType"
             value="{{::vm.securityType.KERBEROS}}">
      <label class="radio-button-label" for="securityKerberos" tabindex="0"
             ng-keydown="vm.keyDown($event,vm.securityType.KERBEROS)">{{::vm.securityType.KERBEROS}}</label>
      <br/>
      <div ng-if="vm.data.model.shimVendor === 'Hortonworks' || vm.data.model.shimVendor === 'Cloudera'">
        <input id="securityKnox" type="radio" ng-model="vm.data.model.securityType" name="securityType"
               value="{{::vm.securityType.KNOX}}">
        <label class="radio-button-label" for="securityKnox" tabindex="0"
               ng-keydown="vm.keyDown($event,vm.securityType.KNOX)">{{::vm.securityType.KNOX}}</label>
      </div>
    </div>
  </div>
  <controls buttons="vm.buttons" help-link="vm.helpLink" data="vm.data"></controls>
</div>
